<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2025-09-23 09:20:18
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-11-04 13:51:36
 * @FilePath: \new-face-ordering-data-screen\src\components\screenLeftTwo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="screenLeftTwo" :style="{ height: props.screenLeftTwoHeight + 'px' }">
    <Title>
      <template #title>
        今日消费设备消费笔数统计
      </template>
    </Title>
    <div class="dv-scroll-board" :style="'width:100%;height:' + (props.screenLeftTwoHeight- $util.fontSize(40)) + 'px;overflow: hidden;'" v-seamlessScroll="{ step: $util.fontSize(60), interval: 3000 }">
      <div class="rowBox" ref="con1">
        <div class="row-item" v-for="(item, index) in DeviceComsum" :key="index" style="'width:100%;" ref="rowItem">
          <div class="ranking-info">
            <div class="info-name">{{ item.device_name }}</div>
            <div class="ranking-value"> {{ item.count }}笔</div>
          </div>
          <div class="ranking-column" :class="item.color">
            <div class="inside-column" :style="'width:' + ((item.count * 100) / max2) + '%;'">
            </div>
          </div>
        </div>
      </div>
      <div class="rowBox" v-show="false">
        <div class="row-item" v-for="(item, index) in DeviceComsum" :key="index" style="'width:100%;" ref="rowItem">
          <div class="ranking-info">
            <div class="info-name">{{ item.device_name }}</div>
            <div class="ranking-value"> {{ item.count }}笔</div>
          </div>
          <div class="ranking-column" :class="item.color">
            <div class="inside-column" :style="'width:' + ((item.count * 100) / max2) + '%;'">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import $util from "../util/util"
import { PiniaStore } from '../store/index'
import { ref, onMounted, watch } from "vue"
import { ElMessage } from 'element-plus'
import { todayDeviceRank } from './Options/Api'
const store = PiniaStore()
interface PropsType {
  screenLeftTwoHeight?: number
}
const props = withDefaults(defineProps<PropsType>(), {
  screenLeftTwoHeight: 0,
})
const DeviceComsum = ref<any[]>([])
const getList = async () => {
  const res: any = await todayDeviceRank()
  if (res.code !== 1) return ElMessage.error(res.msg)
  return new Promise(async (resolve) => {
    DeviceComsum.value = res.data.list
    getMax2()
    store.setLoddingStatus()
    resolve(undefined) // 所有操作完成后resolve
  })
}
const max2 = ref<number>(0)
// 找出数组里面的最大值
const getMax2 = () => {
  let barArry: any = []
  DeviceComsum.value.forEach((item, index) => {
    item.color = (index % 2) !== 1 ? 'color1' : 'color2'
    barArry.push(Number(item.count))
  })
  max2.value = Math.max.apply(null, barArry)
}
onMounted(async () => {
})
defineExpose({ getList })
</script>
<style scoped lang="scss">
.screenLeftTwo {
  margin-top: 24px;
  background: rgba(0, 40, 87, 0.4);

  .dv-scroll-board {
    margin-top: 10px;
    padding: 0 20px;

    .row-item {
      transition: all .3s;
      padding-top: 16px;

      .ranking-info {
        font-size: 16px;
        color: #FFFFFF;
        display: flex;
        align-items: center;

        .info-name {
          flex: 1;
        }

        .ranking-value {}
      }

      .ranking-column {
        height: 13px;
        display: flex;
        align-items: center;
        border: none;
        padding: 2px 3px;
        margin-top: 10px;
        box-sizing: border-box;
      }

      .ranking-column.color1 {
        background: rgba(4, 124, 255, 0.4);
        border-radius: 2px;

        .inside-column {
          height: 100%;
          background-color: rgba(32, 166, 255, 1);
          border-radius: 4px;
        }
      }

      .ranking-column.color2 {
        background: rgba(0, 249, 238, 0.4);

        .inside-column {
          height: 100%;
          background:rgba(0, 249, 238, 1);
          border-radius: 4px;
        }
      }
    }
  }
}
</style>